require('./PageGeneralcourse.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
import { Boxs, NavBar, Context } from 'saltui';
import { Control } from 'react-keeper';
const { HBox, Box, VBox } = Boxs;
const classNames = require("classnames")
class Generalcourse extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            term: '',
            timePeroidFlag: '',
            grade: '',
            list: [],
            className: ''
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleOnLeftClick() {
        Control.go(-1)
    }
    handleClick(e) {
        let id = e.target.dataset["id"];
        let data = {};
        // data.pitchId = this.state.list[id].pitchId;
        // data.classEleId = this.state.list[id].classEleId;
        // data.status = this.state.list[id].status;
        // data.eleStuId = this.state.list[id].eleStuId;
        // data.pitchName = this.state.list[id].pitchName;
        Object.assign(data,this.state.list[id])
        let { grade, term } = this.state
        data.grade = grade;
        data.term = term;      
        Control.go('/home/selectGeneralClassDetail', { ...data })
    }
    render() {
        return (
            <div className="generalcourse">
                <NavBar
                    className={classNames({ "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title='开始选课'
                    onLeftClick={this.handleOnLeftClick.bind(this)}
                    onRightClick={Context.noop}
                    rightText=''
                />
                <div className="generalcourse-content">
                    <div className="t-LH25 generalcourse-content-head">
                        <span>{this.state.className}</span>
                        {this.state.grade && <span>{this.state.grade}年</span>}
                        {this.state.term && <span>第{this.state.term == 2 ? '二' : '一'}学期</span>}
                    </div>
                    {this.state.list.map((item, index) => {
                        return (
                            <HBox data-id={index} className="t-LH40 list" key={index} onClick={this.handleClick}>
                                <Box data-id={index} flex={1}>{item.pitchName}</Box>
                                <Box data-id={index} flex={1} className="omt">{item.courseName + (item.courseName?'/':'')}{item.teacherName}</Box>
                                <Box data-id={index} flex={1} className={classNames("t-FAR list-statusName", { "list-statusName-pending": item.status == 2 },{ "list-statusName-select": item.status == 3 })}>{item.statusName}</Box>
                            </HBox>
                        );
                    })}
                </div>

            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetch();
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Generalcourse, Reflux.connect(Store));

module.exports = Generalcourse;
